<template>
  <div class="card" @click="toPage()">
    <div class="card-img">
      <img class="img" :src="img">
    </div>

    <div class="card-content">
      <div class="card-title">
        {{ title }}
      </div>
      <div class="card-detail">
        {{ detail }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: 'card title',
  },
  detail: {
    type: String,
    default: 'card detail',
  },
  img: {
    type: String,
    default: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
  },
  toUrl: {
    type: String,
    default: '/',
    required: true,
  },
})

const router = useRouter()
function toPage() {
  const { toUrl } = props
  router.push(toUrl)
}
</script>

<style scoped lang="less">
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  height: 100px;
  padding: 10px;
  border-radius: 6px;
  background-color: greenyellow;
}
.card-img {
  width: 40px;
}
.card-content {
  display: flex;
  flex-direction: column;
  width: 80px;
  margin-left: 8px;
}
.img {
  width: 40px;
  height: 50px;
}
</style>
